<template>
  <div>
    <el-card shadow='never'>
      <div slot='header'>
        <span style='font-size: 18px; font-weight: 700; line-height: 32px'>项目资料</span>
      </div>
      <div>
        <!--<p>上传项目试验相关文件(zip、pdf、word)：</p>-->
        <!--<input type='file' style='margin: 15px 0'>-->
        <div>
          <input
            type='file'
            ref="pathClear"
            @change='uploadFiles'
            name="file"
            id="file"
            style='width: 200px'
          />
          <el-button
            style="margin-left: 10px;"
            size="small"
            icon="el-icon-plus"
            type="danger"
            @click="submitUpload"
          >添 加</el-button>
        </div>
        <!-- 表格 -->
        <div>
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            style="width: 80%; font-size: 15px"
          >
            <el-table-column
              prop="zlmc"
              label="文件名称"
            ></el-table-column>
            <!-- <template slot-scope="scope">
              <a :href="scope.zlurl"></a>
            </template> -->
            <el-table-column
              prop='TIMESTAMP'
              label='时间'
            >
              <template slot-scope="scope">
                <a
                  :href="scope.row.zlurl"
                  dowanload
                >{{scope.row.zlurl}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type='text'
                  icon="el-icon-delete"
                  size="mini"
                  @click="handleDeleteFile(scope.row)"
                >删 除</el-button>
                <el-button
                  type='error'
                  icon='el-icon-download'
                  size='mini'
                  @click="downLoadListItem(scope.row)"
                >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15,]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </div>

    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { applyNewProgectAPI, getProjectList, getProjectUpload, delProjectList, getProjectDownLoad } from '@/api/backStage.js';
export default {
    props: ['editRow'],
    name: 'projectData',
    data() {
        return {
            currentPage: 1, //初始页
            pagesize: 10, // 每页的数据
            fileList: [],
            uploadType: '', // 上传类型
            formData: null, // 上传内容
            file: null, //文件
            ip: '',
            timer: '',
            tableData: []
        };
    },
    computed: {
        ...mapState({
            editFlag: (state) => {
                return state.applyFor.editFlag;
            },
            applyxmid: (state) => {
                return state.applyFor.applyxmid;
            }
        })
    },
    mounted() {
        if (this.editFlag == 'new') {
            this.getNewGcpList();
        } else if (this.editFlag == 'edit') {
            this.getEditGcpList();
        }
    },
    beforeDestroy() {
        clearTimeout(this.timer);
    },
    methods: {
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        // 上传内容
        uploadFiles(event) {
            let file = event.target.files[0];
            this.fileInfo = file;
            let size = Math.floor(file.size / 1024); //计算文件的大小
            this.formData = new FormData(); //new一个formData事件
            this.formData.append('file', file); //将file属性添加到formData里
            this.file = file;
            //此时formData就是我们要向后台传的参数了
        },
        // 上传
        async submitUpload() {
            if (this.$refs.pathClear.value == '') {
                this.$message.warning('请选择上传要上传得文件');
            } else {
                let index = this.file.name.lastIndexOf('.');
                let a = this.file.name.substring(index + 1, this.file.name.length);
                if (a != 'xlsx' && a != 'docx' && a != 'doc' && a != 'pdf' && a != 'ppt') {
                    this.$message.warning('目前只支持xlsx以及docx,doc,pdf,ppt类型文档!');
                    this.$refs.pathClear.value = '';
                } else {
                    if (this.editFlag == 'new') {
                        const res = await getProjectUpload({
                            token: this.$store.state.user.token,
                            oprid: this.$store.state.user.oprid,
                            xmjd: '0',
                            xmid: this.xmid,
                            ImportImage: this.formData
                        });
                        // this.$refs.pathClear.value = '';
                        if (res.code == 'succ') {
                            this.$message.success('上传' + res.message);
                            // 上传成功之后清除input框file的值
                            this.$refs.pathClear.value = '';
                            // this.getNewGcpList();
                            const dataRes = await getProjectList({
                                token: this.$store.state.user.token,
                                xmid: this.xmid
                            });
                            if (res.code == 'succ') {
                                if (dataRes.result == '') {
                                    this.tableData = [];
                                } else {
                                    this.tableData = dataRes.result;
                                }
                            } else {
                                this.$message.error(res.message);
                            }
                        } else {
                            this.$message.error('上传失败');
                        }
                    } else if (this.editFlag == 'edit') {
                        const res = await getProjectUpload({
                            token: this.$store.state.user.token,
                            oprid: this.$store.state.user.oprid,
                            xmjd: '0',
                            xmid: this.applyxmid,
                            ImportImage: this.formData
                        });
                        if (res.code == 'succ') {
                            this.$message.success(res.message);
                            this.$refs.pathClear.value = '';
                            this.getEditGcpList();
                        } else {
                            this.$message.error('上传失败');
                        }
                    }
                }
            }
        },
        // 新项目获取列表
        async getNewGcpList() {
            const res = await applyNewProgectAPI({
                token: this.$store.state.user.token,
                OPRID: this.$store.state.user.oprid,
                ip: this.ip
            });
            if (res.code == 'succ') {
                this.xmid = res.result;
                localStorage.setItem('aaaxmid', res.result);
                const dataRes = await getProjectList({
                    token: this.$store.state.user.token,
                    xmid: res.result
                });
                if (res.code == 'succ') {
                    if (dataRes.result == '') {
                        this.tableData = [];
                    } else {
                        this.tableData = dataRes.result;
                    }
                } else {
                    this.$message.error(res.message);
                }
                // localStorage.setItem('xmid', res.result);
                // this.$store.dispatch('applyFor/applyxmid', res.result);
            } else {
                this.$message.error(res.message);
            }
        },
        // 编辑获取项目列表
        async getEditGcpList() {
            const res = await getProjectList({
                token: this.$store.state.user.token,
                xmid: this.applyxmid
            });
            if (res.code == 'succ') {
                this.tableData = res.result;
            } else {
                this.tableData = [];
            }
        },
        // 删除
        async handleDeleteFile(row) {
            if (this.editFlag == 'new') {
                const res = await delProjectList({
                    token: this.$store.state.user.token,
                    xmid: this.xmid
                });
                if (res.code == 'succ') {
                    this.$message.success(res.message);
                    this.getNewGcpList();
                } else {
                    this.$message.error(res.message);
                }
            } else if (this.editFlag == 'edit') {
                const res = await delProjectList({
                    token: this.$store.state.user.token,
                    xmid: this.applyxmid
                });
                if (res.code == 'succ') {
                    this.$message.success(res.message);
                    this.getEditGcpList();
                } else {
                    this.$message.error(res.message);
                }
            }
        },
        // 下载
        async downLoadListItem(row) {
            if (this.editFlag == 'new') {
                const res = await getProjectDownLoad({
                    token: this.$store.state.user.token,
                    xmid: this.xmid
                });
                if (res.code == 'succ' && res.result.length > 0) {
                    res.result.forEach((item) => {
                        const ele = document.createElement('a');
                        ele.setAttribute('href', item.zlurl);
                        // element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(item.zlurl));
                        const str = item.zlurl.substring(item.zlurl);
                        ele.setAttribute('download', str);
                        ele.click();
                        // window.open(item.zlurl);
                    });
                } else {
                    this.$message.error(res.message);
                }
            } else if (this.editFlag == 'edit') {
                const res = await getProjectDownLoad({
                    token: this.$store.state.user.token,
                    xmid: this.applyxmid
                });
                if (res.code == 'succ' && res.result.length > 0) {
                    res.result.forEach((item) => {
                        window.open(item.zlurl);
                    });
                } else {
                    // this.$message.error(res.message);
                }
            }
        },
        handleRemove(file, fileList) {},
        handlePreview(file) {},
        // 分页
        // 每页显示的条数
        handleSizeChange: function (size) {
            this.pagesize = size;
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
        }
    }
};
</script>

<style scoped>
::v-deep .el-upload--text {
    width: 80px;
    height: 32px;
    border: none;
    margin-bottom: -12px;
}
::v-deep .el-upload-list__item-name {
    width: 150px;
}
</style>
